<template>
  <div :class='s.wrap'>
    <header-top :option='headerOption'></header-top>
    <div :class='s.content' :style='{backgroundImage: "url(" + bgImg + ")"}' >
      <div :class='s.rules'>
        <img src="~assets/images/grules-chat-box.png" >
        <div :class='s.text'>
          <p v-for='rule in gameRules'>{{rule.DESC}}</p>
        </div>
      </div>
      <img src="~assets/images/grules-gl.png" :class='s.theRing'>
      <div :class='s.btnWrap'>
        <div :class='s.btn' @click='onBack'>好的</div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from 'components/HeaderTop'
import { getSessionGame } from 'components/game/openGame'
export default {
  components:{HeaderTop},
  data () {
    return {
      headerOption: {
        title: '比赛规则',
        operations:[]
      },
      bgImg: require('assets/images/grules-bg.png'),
      chatBox: require('assets/images/grules-chat-box.png'),
      gameID: '',
      gameRules: []
    }
  },
  mounted () {
    this.gameID = this.$route.query.gameID
    this.gameRules = getSessionGame(this.gameID).GAME_RULE || []
  },
  methods:{
    onBack(){
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="less" module='s'>
.wrap{
  font-size: 1.5rem;
  .content{
    background-size: cover;
    .rules{
      padding-top: 20px;
      position: relative;
      margin: auto 10px;
      img{
        width: 100%;
      }
      .text{
        position: absolute;
        top: 50px;
        bottom: 60px;
        overflow-y: auto;
        margin: 10px;
        padding: 10px;
        box-shadow: 0 -1px 1px -1px rgba(0,0,0,0.2) inset;
      }
    }
    .theRing{
      width: 100%;
    }
    .btnWrap{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(99,99,114,0.8);
      .btn{
        margin: 20px auto;
        width: 80%;
        border-radius: 30px;
        text-align: center;
        background-color: rgb(255,184,75);
        padding: 10px 0;
        color: rgba(254,254,254, 0.8);
      }
    }
  }
}
</style>